<template>
  <div :style="{...bottomStaySpace(), background: autoBGCover(bgImage)}" class="wrap">
    <up-navbar
      auto-back
      bg-color="transparent"
      placeholder
      title="日程详情"
    />
    <div :style="{backgroundColor: statusAbout(scheduleDetails.status)?.bgColor}" class="status_text">{{ statusAbout(scheduleDetails.status).text }}</div>
    <div class="schedule_title mt16">{{ scheduleDetails.name }}</div>
    <div class="body mt28">
      <div class="body_item">
        <div class="flex_start_cen">
          <div class="circle" />
          <span class="item_title ml10">日程时间</span>
        </div>
        <div class="item_text">{{ scheduleDetails.beginTimeText }} - {{ scheduleDetails.endTimeText }} </div>
      </div>
      <div class="body_item">
        <div class="flex_start_cen">
          <div class="circle" />
          <span class="item_title ml10">日程地址</span>
        </div>
        <div class="item_text">{{ scheduleDetails.province }}-{{ scheduleDetails.city }}</div>
      </div>
      <template v-if="scheduleDetails.isCreat">
        <div class="body_item">
          <div class="flex_start_cen">
            <div class="circle" />
            <span class="item_title ml10">日程创建人</span>
          </div>
          <div class="item_text">{{ scheduleDetails.creatName }}</div>
        </div>
        <div class="body_item">
          <div class="flex_start_cen">
            <div class="circle" />
            <span class="item_title ml10">参与主体</span>
          </div>
          <div class="item_text">{{ scheduleDetails.participantsName }}</div>
        </div>
      </template>
      <div v-if="scheduleDetails.eventScheduleDetailId !== '0'" class="body_item">
        <div class="flex_start_cen">
          <div class="circle" />
          <span class="item_title ml10">活动记录</span>
        </div>
        <div class="item_text">
          <div v-html="scheduleDetails.recordText" />
          <div class="mt24 flex_start flex_wrap">
            <template v-for="(item, index) in scheduleDetails.attachmentNew" key="index">
              <div style="margin: 0 10rpx 10rpx 0">
                <Image v-if="item.fileType === 'picture'" :name="item.path" overspread size="120" type="png" @tap="previewImgFn" />
                <video
                  v-if="item.fileType === 'video'"
                  :id="`myVideo${index}`"
                  :src="item.path"
                  style="width: 120rpx;height: 120rpx"
                />
                <Image v-if="item.fileType === 'document'" name="activitySchedule/document_img" oss overspread size="120" @tap="previewFile(item.path, item.fileSuffix)" />
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!--  当前智客创建的才有权限显示  -->
    <template v-if="scheduleDetails.isCreat">
      <!--  进行中、待上传、已完成 || 已结束  -->
      <template v-if="scheduleDetails.status === 1 || scheduleDetails.status === 2 || scheduleDetails.status === 3">
        <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
          <Button size="L" @confirm="summitScheduleRecordsFn">{{ scheduleDetails.eventScheduleDetailId === '0' ? '上传日程记录' : '编辑' }}</Button>
        </div>
      </template>
      <template v-if="scheduleDetails.status === 0">
        <div :style="{...keepBottomSafeDis(), justifyContent: 'space-around'}" class="suction_bottom_btn">
          <Button size="N" type="solid" @confirm="cancelFn">取消活动</Button>
          <Button size="N" @confirm="editScheduleFn">编辑活动</Button>
        </div>
      </template>
    </template>
    <!--  取消活动确认弹窗 -->
    <u-popup :close-on-click-overlay="false" :show="showCancelSchedulePop" bg-color="transparent" mode="center" overlay-opacity="0.25">
      <Pconfirm tip-text="确认取消活动吗？" tip-title="提示" @cancel="showCancelSchedulePop = false" @confirm="confirmCancelScheduleFn" />
    </u-popup>
  </div>
</template>
<script lang="ts" setup>
import Image from '@C/Image.vue'
import { autoBGCover, keepBottomSafeDis, Router, onLoad, bottomStaySpace } from '@U/common'
import Button from '@C/Button.vue'
import { computed, ref } from 'vue'
import { cancelSchedule, getScheduleDetails } from '@P_GL/activitySchedule/request'
import Pconfirm from '@C/Pconfirm.vue'
import previewFile from '@U/previewFile'

const bgImage = `${import.meta.env.VITE_SHOUDAO_OSS_URL}/activitySchedule/schedule_details_bg.png`
const statusAbout = computed(() => (status: number) => {
  let obj = {}
  if (status === 0) obj = { text: '待开始', bgColor: '#8183FA' }
  if (status === 1) obj = { text: '进行中', bgColor: '#1890FF' }
  if (status === 2) obj = { text: '待上传', bgColor: '#FF8002' }
  if (status === 3) obj = { text: scheduleDetails.value?.isCreat ? '已完成' : '已结束', bgColor: '#2DC76D' }
  return obj
})
const cancelFn = async () => {
  showCancelSchedulePop.value = true
}
const showCancelSchedulePop = ref(false)
const confirmCancelScheduleFn = async () => {
  const res = await cancelSchedule({ id: scheduleDetails.value.id }).finally(() => {})
  if (res?.code === 200) {
    Router.back()
    showCancelSchedulePop.value = false
  }
}
const editScheduleFn = () => {
  Router.push('editSchedule', { scheduleDetails: JSON.stringify(scheduleDetails.value) })
  uni.$on('getScheduleDetailsFn', getScheduleDetailsFn)
}
const summitScheduleRecordsFn = () => {
  Router.push('createScheduleRecord', { scheduleRecords: JSON.stringify(scheduleDetails.value) })
  uni.$on('getScheduleDetailsFn', getScheduleDetailsFn)
}
const previewImgFn = () => {
  const urls = scheduleDetails.value.attachmentNew?.filter(item => item.fileType === 'picture').map(item1 => item1.path)
  uni.previewImage({
    urls,
  })
}
const scheduleDetails = ref({})
let scheduleId = ''
const ImageSuffix = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp']
const VideoSuffix = ['mp4', 'avi', 'mov', 'wmv', 'rmvb']
const documentSuffix = ['doc', 'docx', 'txt', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'zip']
const getScheduleDetailsFn = async () => {
  const res = await getScheduleDetails({ id: scheduleId }).finally(() => {})
  if (res?.code === 200) {
    scheduleDetails.value = res.data
    if (res.data.record) {
      scheduleDetails.value.recordText = res.data.record?.replace(/\n/g, '<br>')
    }
    if (res.data.attachment?.length > 0) {
      scheduleDetails.value.attachmentNew = res.data.attachment.map((path: string) => {
        let fileType = ''
        const pathArr = path.split('.')
        if (ImageSuffix.includes(pathArr[pathArr.length - 1])) fileType = 'picture'
        else if (VideoSuffix.includes(pathArr[pathArr.length - 1])) fileType = 'video'
        else if (documentSuffix.includes(pathArr[pathArr.length - 1])) fileType = 'document'
        else console.log(`文件名是${path}匹配不到`)
        return ({
          path: `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${path}`,
          fileType,
          fileSuffix: pathArr[pathArr.length - 1],
        })
      })
    }
  }
}
onLoad((options) => {
  scheduleId = options.id
  getScheduleDetailsFn(options.id)
})

</script>

<style lang="less" scoped>
.wrap {
  padding: 24rpx;
  .status_text {
    width: 108rpx;
    height: 40rpx;
    transform: skew(-15deg);
    font-weight: 600;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 40rpx;
    border-radius: 6rpx;
  }
  .schedule_title {
    font-weight: 600;
    font-size: 80rpx;
    color: #FAFCFD;
    line-height: 88rpx;
    letter-spacing: 4rpx;
  }
  .body {
    padding: 28rpx 14rpx;
    background: rgba(255,255,255,0.98);
    border-radius: 24rpx;
    .body_item {
      padding: 0  0 28rpx 14rpx;
      margin-bottom: 26rpx;
      border-bottom: 2rpx solid rgba(0,0,0,0.1);
      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
      .circle {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        border: 4rpx solid #FF8002;
      }
      .item_title {
        font-weight: 600;
        font-size: 28rpx;
        color: #262626;
        line-height: 40rpx;
      }
      .item_text {
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.65);
        line-height: 40rpx;
        padding: 16rpx 0 0 32rpx;
      }
    }
  }
}
</style>
